<template>
  <div class="main ">
    <div class="main__title">
      <div class="text-3xl  font-bold ">损伤导出</div>
      <div class="text-sm">检测地点：上海音乐厅 拍照时间：2021-11-18 10:00:00</div>
    </div>
    <div class="main__content">
      <div class="text-xl ">损伤详情</div>
      <el-table :data="tableData" style="width: 100%" border height="450" >
        <el-table-column type="selection" />
        <el-table-column prop="id" label="损伤ID"  />
        <el-table-column prop="date" label="损伤部位"  />
        <el-table-column prop="name" label="损伤等级" />
        <el-table-column prop="time" label="尺寸" />
        <el-table-column prop="id" label="图片" >
          <template #default>
            <el-image src="/img/222.jpg" style="height: 60px;width: 60px;"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="repair" label="修复策略" />
      </el-table>
    </div>
    <div class="main__footer flex flex-col gap-3">
      <div>选择导出文件选项</div>
      <div class="w-full h-16flex-center">
        <el-checkbox  label="原图" size="large" style="flex: 1;" />
        <el-checkbox  label="标全图" size="large" style="flex: 1;" />
        <el-checkbox  label="损伤记录" size="large" style="flex: 1;" />
        <el-checkbox  label="损伤缩略图" size="large" style="flex: 1;" />
      </div>
      <div>导出地址</div>
      <el-input v-model="input" style="width: 500px;" />
      <el-button style="width: 200px;" type="primary" >立即导出</el-button>
    </div>

  </div>
</template>

<script lang="ts" setup>
// definePageMeta({
//   layout: "new",
// });
const tableData = [
  { id:"开裂_1", date: '翼尖下缘', name: '严重', time: '5cm' ,repair: '修复策略1' },
  { id: "凹陷_2", date: '翼尖下缘', name: '损伤数量2', time: '20cm' ,repair: '修复策略2' },
  { id: "裂缝_3", date: '翼尖下缘', name: '损伤数量3', time: '10cm' ,repair: '修复策略3' },
  { id: "裂缝_3", date: '翼尖下缘', name: '损伤数量3', time: '10cm' ,repair: '修复策略3' },
  { id: "裂缝_3", date: '翼尖下缘', name: '损伤数量3', time: '10cm' ,repair: '修复策略3' },
  { id: "裂缝_3", date: '翼尖下缘', name: '损伤数量3', time: '10cm' ,repair: '修复策略3' },
]
const input = ref('')
</script>

<style lang="scss" scoped>
@mixin block($block) {
  .#{$block} {
    @content;
  }
}

@mixin element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}

@include block('main') {
  @apply flex p-4 flex-col w-screen h-screen gap-4;

  @include element('title') {}

  @include element('content') {
    flex: 3;
    // height: 200px;


  }

  @include element('footer') {
    flex: 2;
    @apply p-4;
  }

}

:deep(.el-table th) {
  background-color: rgb(245, 247, 250);
}
</style>